<template>
  <div class="device-list-container">
    <div class="page-header">
      <h1 class="page-title">设备管理</h1>
      <div class="header-actions">
        <el-button type="primary" @click="addDevice">
          <el-icon><Plus /></el-icon>
          添加设备
        </el-button>
      </div>
    </div>

    <div class="search-section">
      <el-form :inline="true" class="search-form">
        <el-form-item label="设备名称">
          <el-input v-model="searchForm.name" placeholder="请输入设备名称" clearable />
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="searchForm.type" placeholder="请选择设备类型" clearable>
            <el-option label="剪叉式" value="剪叉式" />
            <el-option label="直臂式" value="直臂式" />
            <el-option label="曲臂式" value="曲臂式" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-section">
      <el-table :data="deviceList" style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="序号" width="80" />
        <el-table-column prop="name" label="设备名称" />
        <el-table-column prop="type" label="设备类型" />
        <el-table-column prop="height" label="平台高度" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column prop="dailyPrice" label="日租单价" />
        <el-table-column prop="monthlyPrice" label="月租单价" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="viewDetail(row)">
              查看
            </el-button>
            <el-button type="success" size="small" @click="editDevice(row)">
              编辑
            </el-button>
            <el-button type="danger" size="small" @click="deleteDevice(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search } from '@element-plus/icons-vue'
import { usePageDialogStore } from '@/store/pageDialogs'

export default {
  name: 'DeviceList',
  setup() {
    const router = useRouter()
    const loading = ref(false)
    const dialogStore = usePageDialogStore()
    
    const searchForm = reactive({
      name: '',
      type: ''
    })
    
    const pagination = reactive({
      currentPage: 1,
      pageSize: 10,
      total: 0
    })
    
    const deviceList = ref([
      {
        id: 1,
        name: '剪叉式升降机001',
        type: '剪叉式',
        height: '6米',
        quantity: 5,
        dailyPrice: '200',
        monthlyPrice: '5000',
        status: '可租赁',
        specifications: '工作高度: 6米, 承载重量: 300kg, 平台尺寸: 1.5m×0.8m',
        remarks: '设备状态良好，定期维护中'
      },
      {
        id: 2,
        name: '直臂式升降机002',
        type: '直臂式',
        height: '12米',
        quantity: 3,
        dailyPrice: '350',
        monthlyPrice: '8000',
        status: '维修中',
        specifications: '工作高度: 12米, 承载重量: 250kg, 平台尺寸: 1.2m×0.6m',
        remarks: '正在进行例行维护检修'
      },
      {
        id: 3,
        name: '曲臂式升降机003',
        type: '曲臂式',
        height: '18米',
        quantity: 2,
        dailyPrice: '500',
        monthlyPrice: '12000',
        status: '已租出',
        specifications: '工作高度: 18米, 承载重量: 200kg, 平台尺寸: 1.0m×0.8m',
        remarks: '高空作业专用设备，已租赁给某建筑公司'
      }
    ])
    
    const getStatusType = (status) => {
      const typeMap = {
        '可租赁': 'success',
        '已租出': 'warning',
        '维修中': 'danger',
        '停用': 'info'
      }
      return typeMap[status] || 'info'
    }
    
    const loadDeviceList = () => {
      loading.value = true
      setTimeout(() => {
        pagination.total = deviceList.value.length
        loading.value = false
      }, 500)
    }
    
    const handleSearch = () => {
      pagination.currentPage = 1
      loadDeviceList()
    }
    
    const handleReset = () => {
      searchForm.name = ''
      searchForm.type = ''
      handleSearch()
    }
    
    const handleSizeChange = (size) => {
      pagination.pageSize = size
      loadDeviceList()
    }
    
    const handleCurrentChange = (page) => {
      pagination.currentPage = page
      loadDeviceList()
    }
    
    const addDevice = () => {
      router.push('/system_management/device/add')
    }
    
    const viewDetail = (row) => {
      dialogStore.showOnlyDialog('equipMng', row)
    }
    
    const editDevice = (row) => {
      router.push(`/system_management/device/edit/${row.id}`)
    }
    
    const deleteDevice = (row) => {
      ElMessageBox.confirm(
        `确定要删除设备 "${row.name}" 吗？`,
        '删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        // 这里调用删除API
        ElMessage.success('删除成功')
        loadDeviceList()
      }).catch(() => {
        ElMessage.info('已取消删除')
      })
    }
    
    onMounted(() => {
      loadDeviceList()
    })
    
    return {
      searchForm,
      pagination,
      deviceList,
      loading,
      Plus,
      Search,
      getStatusType,
      handleSearch,
      handleReset,
      handleSizeChange,
      handleCurrentChange,
      addDevice,
      viewDetail,
      editDevice,
      deleteDevice
    }
  }
}
</script>

<style scoped>
.device-list-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.search-section {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.search-form .el-form-item {
  margin-bottom: 10px;
}

.table-section {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
